<!-- 个人中心 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <title>个人中心</title>
    <link href="../../layui/css/layui.css" rel="stylesheet">
    <!-- 样式 -->
    <link href="../../css/style.css" rel="stylesheet"/>
    <!-- 主题（主要颜色设置） -->
    <link href="../../css/theme.css" rel="stylesheet"/>
    <!-- 通用的css -->
    <link href="../../css/common.css" rel="stylesheet"/>
</head>
<style>
    html::after {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        content: '';
        display: block;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
        z-index: -1;
    }

    #swiper {
        overflow: hidden;
    }

    #swiper .layui-carousel-ind li {
        width: 50px;
        height: 1px;
        border-width: 0;
        border-style: solid;
        border-color: rgba(1, 1, 1, 0.3);
        border-radius: 30px;
        background-color: rgba(255, 0, 0, 1);
        box-shadow: 0 0 0px rgba(255, 0, 0, .8);
    }

    #swiper .layui-carousel-ind li.layui-this {
        width: 50px;
        height: 10px;
        border-width: 0;
        border-style: solid;
        border-color: rgba(0, 0, 0, 0.3);
        border-radius: 50px;
        background-color: rgba(0, 112, 126, 1);
        box-shadow: 0 0 0px rgba(15, 98, 108);
    }

    .index-title {
        text-align: center;
        box-sizing: border-box;
        width: 980px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .index-title span {
        padding: 0 10px;
        line-height: 1.4;
    }

    .center-container .layui-nav-tree {
        width: 100%;
    }

    .center-container .layui-nav {
        position: inherit;
    }

    .center-container .layui-nav-tree .layui-nav-item {
        height: 44px;
        line-height: 44px;
        font-size: 14px;
        color: rgba(0, 112, 126, 1);
        border-width: 0;
        border-style: solid;
        border-color: rgba(38, 155, 158, 1);
        border-radius: 0;
        background-color: #fff;
        box-shadow: 0 0 6px rgba(0, 112, 126, 1);
        text-align: center;
    }

    .center-container .layui-nav-tree .layui-nav-bar {
        height: 44px !important;
        opacity: 0 !important;
    }

    .center-container .layui-nav-tree .layui-nav-item.layui-this {
        font-size: 14px;
        color: #fff;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(38, 155, 158, 1);
        border-radius: 0px;
        background-color: rgba(38, 155, 158, 1);
        box-shadow: 0 0 0px rgba(0, 112, 126, 1);
    }

    .center-container .layui-nav-tree .layui-nav-item:hover {
        font-size: 14px;
        color: #fff;
        border-width: 0;
        border-style: solid;
        border-color: rgba(255, 0, 0, .3);
        border-radius: 0;
        background-color: rgba(38, 155, 158, 1);
        box-shadow: 0 0 6px rgba(255, 0, 0, 0);
    }

    .center-container .layui-nav-tree .layui-nav-item a {
        line-height: inherit;
        height: auto;
        background-color: inherit;
        color: inherit;
        text-decoration: none;
    }

    .right-container {
        position: relative;
    }

    .right-container .layui-form-item {
        display: flex;
        align-items: center;
    }

    .right-container .layui-input-block {
        margin: 0;
        flex: 1;
    }

    .right-container .input .layui-input {
        padding: 0 12px;
        height: 40px;
        font-size: 14px;
        color: #333;
        border-radius: 4px;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(0, 112, 126, 1);
        background-color: #fff;
        box-shadow: 0 0 6px rgba(0, 112, 126, 1);
        text-align: left;
    }

    .right-container .select .layui-input {
        padding: 0 12px;
        height: 40px;
        font-size: 14px;
        color: #333;
        border-radius: 4px;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(0, 112, 126, 1);
        background-color: #fff;
        box-shadow: 0 0 6px rgba(0, 112, 126, 1);
        text-align: left;
    }

    .right-container .date .layui-input {
        padding: 0 12px;
        height: 40px;
        font-size: 14px;
        color: #333;
        border-radius: 4px;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(0, 112, 126, 1);
        background-color: #fff;
        box-shadow: 0 0 6px rgba(0, 112, 126, 1);
        text-align: left;
    }
</style>
<body>

<div id="app">
    <!-- 轮播图 -->
    <!-- <div class="layui-carousel" id="swiper">
        <div carousel-item id="swiper-item">
            <div v-for="(item,index) in swiperList" v-bind:key="index">
                <img class="swiper-item" :src="item.img">
            </div>
        </div>
    </div> -->
    <div :style='{"boxShadow":"0 0 6px rgba(15,98,108)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}' class="layui-carousel"
         id="swiper">
        <div carousel-item>
            <div :key="index" v-for="(item,index) in swiperList">
                <img :src="item.img" style="width: 100%;height: 100%;object-fit:cover;"/>
            </div>
        </div>
    </div>
    <!-- 轮播图 -->

    <!-- 标题 -->
    <!-- <h2 style="margin-top: 20px;" class="index-title">USER / CENTER</h2>
    <div class="line-container">
        <p class="line" style="background: #EEEEEE;"> 个人中心 </p>
    </div> -->
    <div :style='{"padding":"10px","boxShadow":"10px 8px 6px rgba(0, 112, 126, 1)","margin":"10px auto","borderColor":"rgba(38, 155, 158, 1)","backgroundColor":"rgba(255, 255, 255, 1)","color":"rgba(0, 112, 126, 1)","borderRadius":"4px","borderWidth":"1px","fontSize":"20px","borderStyle":"solid","height":"auto"}'
         class="index-title">
        <span>USER / CENTER</span><span>个人中心</span>
    </div>
    <!-- 标题 -->

    <div class="center-container">
        <!-- 个人中心菜单 config.js-->
        <div :style='{"padding":"0","boxShadow":"-1px 1px 6px rgba(0, 112, 126, 1)","margin":"0","borderColor":"rgba(38, 155, 158, 1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"160px","borderStyle":"solid"}'
             class="left-container">
            <ul class="layui-nav layui-nav-tree">
                <li :class="index==0?'layui-this':''" class="layui-nav-item" v-bind:key="index"
                    v-for="(item,index) in centerMenu">
                    <a :href="'javascript:jump(\''+item.url+'\')'">{{item.name}}</a>
                </li>
            </ul>
        </div>
        <!-- 个人中心菜单 -->
        <!-- 个人中心 -->
        <div :style='{"padding":"20px","boxShadow":"0px 0px 0px rgba(0, 112, 126, 1)","margin":"0","borderColor":"rgba(0, 112, 126, 1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0","borderStyle":"solid"}'
             class="right-container">
            <form class="layui-form" lay-filter="myForm">
                <!-- 主键 -->
                <input id="id" name="id" type="hidden"/>
                <div :style='{"padding":"10px","boxShadow":"0 0 6px rgba(0, 112, 126, 1)","margin":"0 0 10px 0","borderColor":"rgba(0, 112, 126, 1)","backgroundColor":"#fff","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                     class="layui-form-item">
                    <label :style='{"width":"94px","padding":"0 12px 0 0","fontSize":"14px","color":"rgba(0, 112, 126, 1)","textAlign":"right"}'
                           class="layui-form-label">用户名</label>
                    <div class="layui-input-block input">
                        <input autocomplete="off" class="layui-input" id="yonghuming" name="yonghuming" placeholder="用户名"
                               type="text">
                    </div>
                </div>
                <div :style='{"padding":"10px","boxShadow":"0 0 6px rgba(0, 112, 126, 1)","margin":"0 0 10px 0","borderColor":"rgba(0, 112, 126, 1)","backgroundColor":"#fff","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                     class="layui-form-item">
                    <label :style='{"width":"94px","padding":"0 12px 0 0","fontSize":"14px","color":"rgba(0, 112, 126, 1)","textAlign":"right"}'
                           class="layui-form-label">密码</label>
                    <div class="layui-input-block input">
                        <input autocomplete="off" class="layui-input" id="mima" name="mima" placeholder="密码"
                               type="password">
                    </div>
                </div>
                <div :style='{"padding":"10px","boxShadow":"0 0 6px rgba(0, 112, 126, 1)","margin":"0 0 10px 0","borderColor":"rgba(0, 112, 126, 1)","backgroundColor":"#fff","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                     class="layui-form-item">
                    <label :style='{"width":"94px","padding":"0 12px 0 0","fontSize":"14px","color":"rgba(0, 112, 126, 1)","textAlign":"right"}'
                           class="layui-form-label">姓名</label>
                    <div class="layui-input-block input">
                        <input autocomplete="off" class="layui-input" id="xingming" name="xingming" placeholder="姓名"
                               type="text">
                    </div>
                </div>
                <div :style='{"padding":"10px","boxShadow":"0 0 6px rgba(0, 112, 126, 1)","margin":"0 0 10px 0","borderColor":"rgba(0, 112, 126, 1)","backgroundColor":"#fff","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                     class="layui-form-item">
                    <label :style='{"width":"94px","padding":"0 12px 0 0","fontSize":"14px","color":"rgba(0, 112, 126, 1)","textAlign":"right"}'
                           class="layui-form-label">性别</label>
                    <div class="layui-input-block select">
                        <select id="xingbie" name="xingbie">
                            <option value="">请选择</option>
                            <option :value="item" v-bind:key="index" v-for="(item,index) in xingbie">{{item}}</option>
                        </select>
                    </div>
                </div>
                <div :style='{"padding":"10px","boxShadow":"0 0 6px rgba(0, 112, 126, 1)","margin":"0 0 10px 0","borderColor":"rgba(0, 112, 126, 1)","backgroundColor":"#fff","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                     class="layui-form-item">
                    <label :style='{"width":"94px","padding":"0 12px 0 0","fontSize":"14px","color":"rgba(0, 112, 126, 1)","textAlign":"right"}'
                           class="layui-form-label" style="opacity: 0;">头像</label>
                    <div class="layui-input-block">
                        <img :style='{"boxShadow":"0 0 6px rgba(0, 112, 126, 1)","borderColor":"rgba(0, 112, 126, 1)","backgroundColor":"#fff","borderRadius":"10px","borderWidth":"1px","width":"80px","borderStyle":"solid","height":"80px"}'
                             id="touxiangImg"
                             src="../../img/avator.png"
                             style="width: 100px;height: 100px;border-radius: 50%;border: 2px solid #EEEEEE;">
                        <input id="touxiang" name="touxiang" type="hidden"/>
                    </div>
                </div>
                <div :style='{"padding":"10px","boxShadow":"0 0 6px rgba(0, 112, 126, 1)","margin":"0 0 10px 0","borderColor":"rgba(0, 112, 126, 1)","backgroundColor":"#fff","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                     class="layui-form-item">
                    <label :style='{"width":"94px","padding":"0 12px 0 0","fontSize":"14px","color":"rgba(0, 112, 126, 1)","textAlign":"right"}'
                           class="layui-form-label" style="opacity: 0;">图片</label>
                    <div class="layui-input-block">
                        <button :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,.5)","margin":"0 10px 0 0","borderColor":"#ccc","backgroundColor":"red","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"44px"}'
                                class="layui-btn btn-theme" id="touxiangUpload" type="button">
                            <i :style='{"color":"#fff","show":true,"fontSize":"14px"}' class="layui-icon" v-if="true">&#xe67c;</i>上传图片
                        </button>
                    </div>
                </div>
                <div :style='{"padding":"10px","boxShadow":"0 0 6px rgba(0, 112, 126, 1)","margin":"0 0 10px 0","borderColor":"rgba(0, 112, 126, 1)","backgroundColor":"#fff","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                     class="layui-form-item">
                    <label :style='{"width":"94px","padding":"0 12px 0 0","fontSize":"14px","color":"rgba(0, 112, 126, 1)","textAlign":"right"}'
                           class="layui-form-label">联系电话</label>
                    <div class="layui-input-block input">
                        <input autocomplete="off" class="layui-input" id="lianxidianhua" name="lianxidianhua"
                               placeholder="联系电话" type="text">
                    </div>
                </div>
                <div :style='{"padding":"10px","boxShadow":"0 0 6px rgba(0, 112, 126, 1)","margin":"0 0 10px 0","borderColor":"rgba(0, 112, 126, 1)","backgroundColor":"#fff","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                     class="layui-form-item">
                    <label :style='{"width":"94px","padding":"0 12px 0 0","fontSize":"14px","color":"rgba(0, 112, 126, 1)","textAlign":"right"}'
                           class="layui-form-label">余额</label>
                    <div class="layui-input-inline input">
                        <input autocomplete="off" class="layui-input" disabled="disabled" id="money" name="money"
                               placeholder="余额" type="number">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <i class="layui-icon" style="font-size: 20px;color: red;">&#xe65e;</i>
                        <a href="javascript:void(0)" id="btn-recharge">点我充值</a>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block" style="display: flex;flex-wrap:wrap;">
                        <button :style='{"padding":"0 10px","boxShadow":"0 0  0px rgba(0, 112, 126, 1)","margin":"10px auto 0","borderColor":"rgba(38, 155, 158, 1)","backgroundColor":"rgba(38, 155, 158, 1)","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"60%","fontSize":"14px","borderStyle":"solid","height":"44px"}'
                                class="layui-btn btn-submit btn-theme" lay-filter="*" lay-submit>更新信息
                        </button>
                        <button :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(0, 112, 126, 1)","margin":"10px auto","borderColor":"#ccc","backgroundColor":"#fff","color":"rgba(0, 0, 0, 1)","borderRadius":"8px","borderWidth":"0","width":"60%","fontSize":"14px","borderStyle":"solid","height":"44px"}'
                                @click="logout" class="layui-btn btn-submit">退出登录
                        </button>
                    </div>
                </div>
                <!-- <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(0, 112, 126, 1)","margin":"10px auto","borderColor":"#ccc","backgroundColor":"#fff","color":"rgba(0, 0, 0, 1)","borderRadius":"8px","borderWidth":"0","width":"60%","fontSize":"14px","borderStyle":"solid","height":"44px"}' @click="logout" class="layui-btn btn-submit">退出登录</button>
                    </div>
                </div> -->
            </form>
        </div>
        <!-- 个人中心 -->
    </div>

</div>

<!-- layui -->
<script src="../../layui/layui.js"></script>
<!-- vue -->
<script src="../../js/vue.js"></script>
<!-- 组件配置信息 -->
<script src="../../js/config.js"></script>
<!-- 扩展插件配置信息 -->
<script src="../../modules/config.js"></script>
<!-- 工具方法 -->
<script src="../../js/utils.js"></script>
<!-- 校验格式工具类 -->
<script src="../../js/validate.js"></script>

<script>
    var vue = new Vue({
        el: '#app',
        data: {
            // 轮播图
            swiperList: [],
            xingbie: [],
            centerMenu: centerMenu
        },
        updated: function () {
            layui.form.render(null, 'myForm');
        },
        methods: {
            jump(url) {
                jump(url)
            },
            logout() {
                localStorage.removeItem('Token');
                localStorage.removeItem('role');
                localStorage.removeItem('sessionTable');
                localStorage.removeItem('adminName');
                localStorage.removeItem('userid');
                localStorage.removeItem('userTable');
                localStorage.removeItem('iframeUrl');
                window.parent.location.href = '../login/login.html';
            }
        }
    })

    layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'form', 'upload'], function () {
        var layer = layui.layer;
        var element = layui.element;
        var carousel = layui.carousel;
        var http = layui.http;
        var jquery = layui.jquery;
        var form = layui.form;
        var upload = layui.upload;

        // 获取轮播图 数据
        http.request('config/list', 'get', {
            page: 1,
            limit: 5
        }, function (res) {
            if (res.data.list.length > 0) {
                let swiperList = [];
                res.data.list.forEach(element => {
                    if (element.value != null) {
                        swiperList.push({
                            img: element.value
                        });
                    }
                });
                vue.swiperList = swiperList;
                vue.$nextTick(() => {
                    carousel.render({
                        elem: '#test1',
                        width: '100%',
                        height: '400px',
                        arrow: 'hover',
                        anim: 'fade',
                        autoplay: 'true',
                        interval: '3000',
                        indicator: 'inside'
                    });
                })
                // vue.$nextTick(()=>{
                //   window.xznSlide();
                // });
            }
        });
        // 充值
        jquery('#btn-recharge').click(function (e) {
            layer.open({
                type: 2,
                title: '用户充值',
                area: ['900px', '600px'],
                content: '../shop-recharge/recharge.html'
            });
        });

        // 获取轮播图 数据
        http.request('config/list', 'get', {
            page: 1,
            limit: 5
        }, function (res) {
            if (res.data.list.length > 0) {
                var swiperItemHtml = '';
                for (let item of res.data.list) {
                    if (item.name.indexOf('picture') >= 0 && item.value && item.value != "" && item.value != null) {
                        swiperItemHtml +=
                            '<div>' +
                            '<img style="width: 100%;height: 100%;object-fit:cover;" class="swiper-item" src="' + item.value + '">' +
                            '</div>';
                    }
                }
                jquery('#swiper-item').html(swiperItemHtml);
                // 轮播图
                vue.$nextTick(() => {
                    carousel.render({
                        elem: '#swiper',
                        width: '100%',
                        height: '400px',
                        arrow: 'hover',
                        anim: 'fade',
                        autoplay: 'true',
                        interval: '3000',
                        indicator: 'inside'
                    });

                })
                // carousel.render({
                // 	elem: '#swiper',
                // 	width: swiper.width,height:swiper.height,
                // 	arrow: swiper.arrow,
                // 	anim: swiper.anim,
                // 	interval: swiper.interval,
                // 	indicator: "none"
                // });
            }
        });

        vue.xingbie = '男,女'.split(',')
        // 上传图片
        var touxiangUpload = upload.render({
            //绑定元素
            elem: '#touxiangUpload',
            //上传接口
            url: http.baseurl + 'file/upload',
            // 请求头
            headers: {
                Token: localStorage.getItem('Token')
            },
            // 允许上传时校验的文件类型
            accept: 'images',
            before: function () {
                //loading层
                var index = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
            },
            // 上传成功
            done: function (res) {
                console.log(res);
                layer.closeAll();
                if (res.code == 0) {
                    layer.msg("上传成功", {
                        time: 2000,
                        icon: 6
                    })
                    var url = http.baseurl + 'upload/' + res.file;
                    jquery('#touxiang').val(url);
                    jquery('#touxiangImg').attr('src', url)
                } else {
                    layer.msg(res.msg, {
                        time: 2000,
                        icon: 5
                    })
                }
            },
            //请求异常回调
            error: function () {
                layer.closeAll();
                layer.msg("请求接口异常", {
                    time: 2000,
                    icon: 5
                })
            }
        });

        // 查询用户信息
        let table = localStorage.getItem("userTable");

        if (!table) {
            layer.msg('请先登录', {
                time: 2000,
                icon: 5
            }, function () {
                window.parent.location.href = '../login/login.html';
            });
        }


        http.request(`${table}/session`, 'get', {}, function (data) {
            // 表单赋值
            form.val("myForm", data.data);
            // 图片赋值
            jquery("#touxiangImg").attr("src", data.data.touxiang);
        });

        // 提交表单
        form.on('submit(*)', function (data) {
            data = data.field;
            if (!data.yonghuming) {
                layer.msg('用户名不能为空', {
                    time: 2000,
                    icon: 5
                });
                return false
            }
            if (!data.mima) {
                layer.msg('密码不能为空', {
                    time: 2000,
                    icon: 5
                });
                return false
            }
            if (!isMobile(data.lianxidianhua)) {
                layer.msg('联系电话应输入手机格式', {
                    time: 2000,
                    icon: 5
                });
                return false
            }
            http.requestJson(table + '/update', 'post', data, function (res) {
                layer.msg('修改成功', {
                    time: 2000,
                    icon: 6
                }, function () {
                    window.location.reload();
                });
            });
            return false
        });

    });
</script>
</body>
</html>
